<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>水印的生成与移除</title>
  <style>
    .waterMarkDemo {
      width: 100%;
      height: 800px;
      text-align: center;
    }
  </style>
  <!-- 脚本的引入 -->
  <script src="../js/watermark.js"></script>
</head>

<body>
  <div class="waterMarkDemo">
    <div class="tit">水印demo</div>
    <button id="addWaterMark">添加水印</button>
    <button id="removeWaterMark">移除水印</button>
  </div>

  <!-- 调用 -->
  <script>
    // 初始化水印
    watermark.init({ watermark_txt: "长江，长江! 我是黄河。110119120", watermark_width: 100 })
    // 添加水印
    document.getElementById('addWaterMark').addEventListener('click', function () {
      watermark.load({ watermark_parent_node: "watermark-parent", watermark_txt: "RhysZhang，测试水印，119120911", watermark_width: 100 });
    }, true)
    // 移除水印
    document.getElementById('removeWaterMark').addEventListener('click', function () {
      watermark.remove()
    }, true)
  </script>
</body>

</html>